import { useState, useEffect } from 'react'
import './LeftClassLists.scss'
import { getRankList } from '../../../api/index'

function LeftClassLists (props) {
  const [rankLists, setRankLists] = useState([]);
  const [rankLists2, setRankLists2] = useState([]);
  const [num, setnum] = useState(0)
  useEffect(() => {
    if (num !== 0) return
    setnum(1)
    getRankList().then(({ data })=>{
      setRankLists(data.list.slice(0,4))
      setRankLists2(data.list.slice(4))
      // eslint-disable-next-line
      props.getRankId(data.list[0].id)
    })
  }, [props,num, setnum])
  return (
    <div id="LeftClassLists">
      <div className="class_module">
        <div className="class_title">云音乐特色帮</div>
        <ul>
          {
            rankLists.map((item) => {
              return (
                <li key={item.id} onClick={() => props.getRankId(item.id)}>
                  <div className="img_box">
                    <img src={item.coverImgUrl} alt="" />
                  </div>
                  <div className="text_box">
                    <div className="name">{item.name}</div>
                    <div className="text">{item.updateFrequency}</div>
                  </div>
                </li>
              )
            })
          }
        </ul>
        <div className="class_title">全球媒体榜</div>
        <ul>
          {
            rankLists2.map((item) => {
              return (
                <li key={item.id} onClick={() => props.getRankId(item.id)}>
                  <div className="img_box">
                    <img src={item.coverImgUrl} alt="" />
                  </div>
                  <div className="text_box">
                    <div className="name">{item.name}</div>
                    <div className="text">{item.updateFrequency}</div>
                  </div>
                </li>
              )
            })
          }
        </ul>
      </div>
    </div>
  )
}
export default LeftClassLists